<template>
  <div class="page-list-live">
    <PageList>
      <template #header>视频监控</template>

      <template #tab>
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
          <el-radio-button :label="false">展开</el-radio-button>
          <el-radio-button :label="true">收起</el-radio-button>
        </el-radio-group>
        <div v-show="!IsOnline" class="alert-warp">
          <div class="alert-banner">当前客户端离线</div>
        </div>
        <el-row>
          <el-col :span="isCollapse ? 0 : 8">
            <el-tree ref="tree" :data="treeData" show-checkbox default-expand-all node-key="id" highlight-current :props="defaultProps" @check="treeCheck" />
          </el-col>
          <el-col :span="isCollapse ? 24 : 16">
            <el-row ref="video" class="videoRow" :gutter="20">
              <template v-for="item in treeData[0].children">
                <el-col v-if="checkedNodes.find((node) => node.id === item.id)" :key="item.id" class="videoCol" :span="8">
                  <div class="videoDiv">
                    <videoRtsp :id="'myVideo' + item.id" :url="item.urlServer || item.subUrlServer" :width="videoWidth" />
                  </div>
                  <div style="text-align: center; margin-top: 10px">{{ item.name }}</div>
                </el-col>
              </template>
            </el-row>
          </el-col>
        </el-row>
      </template>
    </PageList>
  </div>
</template>

<script>
import listMixin from '@/mixins/list'
import { VideoSearch } from '@/api/video'
import videoRtsp from '@/components/VideoRtsp'
import { GetOnlineStatus } from '@/api/api'
export default {
  components: {
    videoRtsp
  },
  mixins: [listMixin],
  data() {
    return {
      IsOnline: true,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      treeData: [{ id: 0, name: '视频列表', children: [] }],
      videoWidth: '200',
      isCollapse: false,
      checkedNodes: []
    }
  },
  created() {
    this.VideoSearch()
    this.CheckOnlinStatus()
  },
  mounted() {
    this.videoWidth = (this.$refs.video.$el.clientWidth / 3 - 20).toFixed(0)
    window.onresize = () => {
      this.videoWidth = (this.$refs.video.$el.clientWidth / 3 - 20).toFixed(0)
    }
    this.CheckOnlinStatus()
  },
  methods: {
    async CheckOnlinStatus() {
      const res = await GetOnlineStatus()
      if (res.code === 200) {
        this.IsOnline = res.data
        console.info('  this.IsOnline', this.IsOnline)
      }
    },
    async VideoSearch() {
      const res = await VideoSearch({ pageIndex: 1, pageSize: 10 })
      if (res.data.items.length) {
        res.data.items.forEach((item) => {
          item.name = item.name + '(' + item.status + ')'
        })
        this.treeData[0].children = res.data.items
      }
    },
    treeCheck(data, check) {
      this.checkedNodes = check.checkedNodes
    }
  }
}
</script>

<style lang='scss' scoped>
  .videoDiv {
    height: 200px;
  }
</style>
